<template>
<div class="GridContentWrap">
  <div class="PalaceGrid" v-if="sceneList.length>0">
      <div class="group-wrapper" >
        <div
          class="PalaceGrid_item"
          v-for="(item, index) in sceneList"
          :key="'scene-list-'+index"
          :class="(sceneIdx == index) && 'current'"
          @click="handleClick(index)"
        >
          <el-image class="img" style="width: 100px; height: 100px;" :src="item.imgUrl + '?x-oss-process=image/resize,w_350/format,jpg/quality,q_80'" :preview-teleported="true" lazy :fit="'cover'" ></el-image>
          <text>{{ item.title }}</text>
        </div>
      </div>
  </div>

  <div v-if="modelList">
    <div class="style" id="style">
      <div
        v-for="(item, i) in modelList"
        :key="i"
        :class="isActiveId == item.categoryId ? 'active' : ''"
        @click="handleClickFrom(item.categoryId)"
      >
        <span>{{ item.categoryName }}</span>
      </div>
    </div>

    <div class="PalaceGrid" v-if="modelGroup">
      <div v-for="(item, i) in modelList"  :key="i" :style="item.categoryId == isActiveId?'flex:1':''">
        <div  class="group-wrapper" v-if="item.categoryId == isActiveId" >
          <div v-for="(itemData, idx) in modelGroup" :key="idx"
            class="PalaceGrid_item"
            :class="(modelGroupIdx == idx) && 'current'"
            @click="handleClickPeople(idx)"
          >
          <el-image class="img" style="width: 100px; height: 100px;" :src="itemData.models[0].imgUrl + '?x-oss-process=image/resize,w_350/format,jpg/quality,q_80'" :preview-teleported="true" lazy :fit="'cover'" ></el-image>
            <text>{{ itemData.groupName }}</text>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";
export default {
  name: "PalaceGrid",
  props: {
    // 场景列表
    sceneList: {
      type: Array,
      default:[]
    },
    // 样式第一列表
    modelList: {
      type: Array,
      default:[]
    },
    // 样式第二列表
    modelGroup: {
      type: Array,
      default:[]
    },
  },
  data() {
    return {
      sceneIdx: null,
      modelGroupIdx: null,
      isActiveId: "001",//初始化选中模特风格
      currentUserId:[],//当前选中的第二样式id
    };
  },
  methods: {
    // 选中场景
    handleClick(idx) {
      this.sceneIdx = idx
      this.$emit('selectScene', this.sceneList[idx])
    },
    // 点击切换 风格 第一选项
    handleClickFrom(e) {
      this.isActiveId = e;
    },
    // 点击切换 风格 第二选项
    handleClickPeople(idx) {
      // this.currentUserId.push(e);
      this.modelGroupIdx = idx
      this.$emit('selectModelStyle', this.modelGroup[idx])
    },
  },
};
</script>

<style lang="scss" scoped>
/* 大屏幕设备 */
@media screen and (min-width: 1920px) {
  .PalaceGrid img {
    height: 114px;
  }
}

@media screen and (min-width: 1440px) and (max-width: 1919px) {
  .PalaceGrid img {
    height: 78px;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .PalaceGrid img {
    height: 63px;
  }
}

/* （1024px - 1279px） */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  text {
    font-size: 10px;
  }
  #style {
    margin-bottom: 10px;
  }
}
.group-wrapper:nth-child(1) {
  margin-top: 10px;
}
.group-wrapper {
  display: flex;
  /* margin-bottom: 10px; */
  justify-content: space-evenly;
  /* flex: 1; */
  width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
}

.style {
  color: #666;
  text-align: left;
  padding: 8px;
}
/*.active {
  border-bottom: 2px solid #02a7f0;
}*/
.text_active {
  background-color: #02a7f0;
  color: white;
}
.style div {
  /* margin-right: 1em; */
  display: inline-block;
  padding: 8px 12px;
  font-size: 14px;
  background: #fff;
  border: 1px solid #eee;
  margin: 4px;
  border-radius: 20px;
}
.style div.active{
  background: #02a7f0;
  color: #fff;
  position: relative;
  ::after{
    content:'';
    background: #02a7f0;
    width: 8px;
    height: 8px;
    font-size: 0;
    position: absolute;
    left: 50%;
    bottom: -4px;
    margin-left: -4px;
    display: block;
    transform: rotate(-45deg);
  }
}
.PalaceGrid {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  /*margin-left: 1em;*/
  /*border-radius: 0.5em;*/
  /* font-size: 26px; */
  padding: 0 8px;
}
.PalaceGrid_item {
  width: 100px;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  &.current {
    border-color: #02a7f0;
  }
}
.PalaceGrid div .img {
  width: 100px;
  height: 100px;
  // border-top-left-radius: 0.5em;
  // border-top-right-radius: 0.5em;
  margin: auto;
  cursor: pointer;
  object-fit: cover;
}
text {
  display: inline-block;
  width: 100%;
  background-color: #fff;
  font-size: 14px;
  line-height: 30px;
  padding-bottom: 6px;
  border-radius: 0 0 12px 12px;
}
</style>
